import React, { useState } from "react"; // 导入 React 和 useState Hook
import "./wjs.scss"; // 导入样式文件
import "animate.css"; // 导入动画效果库
import { wjllogin } from "../axiosAPI/wjl"; // 导入用于登录的 API 函数
import { useNavigate } from "react-router-dom"; // 导入路由导航 Hook
import { message } from "antd"; // 导入 Ant Design 的消息提示组件

// 定义 Wjllogin 组件
export default function Wjllogin() {
	let navigate = useNavigate(); // 初始化路由导航
	let [name, setName] = useState(""); // 定义状态变量 name 和更新函数 setName
	let [card, setCard] = useState(""); // 定义状态变量 card 和更新函数 setCard
	let [tid, setTid] = useState(""); // 定义状态变量 tid 和更新函数 setTid

	const [messageApi, contextHolder] = message.useMessage(); // 使用 Ant Design 的消息提示 API

	// 定义登录函数
	let login = async () => {
		// 调用 wjllogin API 进行登录
		let {
			data: { code, sid, clazz, sname }, // 解构 API 返回的数据
		} = await wjllogin({ name, card, tid }); // 传递姓名、身份证号和学号到 API

		// 检查返回的状态码
		if (code === 200) {
			// 登录成功，保存用户信息到 sessionStorage
			sessionStorage.setItem("sid", sid); // 保存会话 ID
			sessionStorage.setItem("clazz", clazz); // 保存班级信息
			sessionStorage.setItem("token", "token"); // 保存 token（这里是示例，实际应从 API 获取）
			sessionStorage.setItem("sname", sname); // 保存姓名

			// 显示成功消息
			messageApi.open({
				type: "success",
				content: "登录成功, 即将跳转至主页",
			});

			// 设置延迟后跳转到主页
			setTimeout(() => {
				navigate("/wjlhome"); // 跳转到主页
			}, 2000);
		} else {
			// 登录失败，显示错误消息
			messageApi.open({
				type: "error",
				content: "登录失败,请检查姓名、身份证号或学号",
			});
		}
	};

	// 组件的 JSX 结构
	return (
		<div className="examlogin animate__animated animate__slideInLeft">
			{" "}
			{/* 主容器，包含动画效果 */}
			<div className="top">
				{" "}
				{/* 顶部区域 */}
				<img className="main" src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2853.svg" alt="" /> {/* 主图标 */}
				<img className="x" src="https://cdn7.axureshop.com/demo/2001850/images/%E5%9C%A8%E7%BA%BF%E8%80%83%E8%AF%95/u2854.svg" alt="" /> {/* 副图标 */}
			</div>
			<div className="title">
				{" "}
				{/* 标题区域 */}
				培训学院在线考试系统 {/* 系统名称 */}
				<span className="lessfont">考生版</span> {/* 子标题 */}
			</div>
			<div className="form">
				{" "}
				{/* 表单区域 */}
				<p>
					<span className="font">考生姓名:</span> {/* 姓名标签 */}
					<input
						type="text" // 输入框类型
						value={name} // 绑定到 name 状态
						onChange={(e) => {
							setName(e.target.value); // 更新 name 状态
						}}
					/>
				</p>
				<p>
					<span className="font">身份证号:</span> {/* 身份证号标签 */}
					<input
						type="text" // 输入框类型
						value={card} // 绑定到 card 状态
						onChange={(e) => {
							setCard(e.target.value); // 更新 card 状态
						}}
					/>
				</p>
				<p>
					<span className="font">学号:</span> {/* 学号标签 */}
					<input
						type="text" // 输入框类型
						value={tid} // 绑定到 tid 状态
						onChange={(e) => {
							setTid(e.target.value); // 更新 tid 状态
						}}
					/>
				</p>
				<p>
					<button
						className="btn" // 按钮样式
						onClick={() => {
							login(); // 点击按钮时调用 login 函数
						}}
					>
						登录 {/* 按钮文本 */}
					</button>
				</p>
				{contextHolder} {/* 显示消息提示的容器 */}
			</div>
		</div>
	);
}
